<template>
  <div>
    <!-- container容器 -->
    <el-container class="home-container">
      <!-- 头部区域 -->
      <el-header>
        <div>
          <img src="../assets/houtai.jpg" alt="" />
          <span>餐厅线上选菜后台管理系统</span>
        </div>
        <!-- <el-button type="info" @click="logout">退出</el-button> -->

        <el-dropdown type="primary">
          <div class="touxiang">
            <el-avatar :size="45" :src="editForm.url"></el-avatar>
          </div>
          <el-dropdown-menu slot="dropdown" style="width: 200px">
            <div class="welcome">
              欢迎光临,
              <p>{{ editForm.adminname }}</p>
            </div>
            <el-dropdown-item icon="el-icon-s-custom">个人主页</el-dropdown-item>
            <el-dropdown-item icon="el-icon-setting" @click.native="showEditDialog()">账号设置</el-dropdown-item>
            <el-dropdown-item icon="el-icon-delete" @click.native="logout()"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <!--  -->
      <el-container>
        <!-- 侧边栏菜单 -->
        <el-aside width="200px">
          <el-menu
            :default-active="activePath"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            text-color="pink"
            active-text-color="#ffd04b"
            :collapse-transition="false"
            router
            unique-opened
          >
            <!-- 一级菜单 -->
            <el-submenu
              :index="item.id + ''"
              v-for="item in MenuList"
              :key="item.id"
            >
              <template slot="title">
                <i :class="item.pic"></i>
                <span>{{ item.authName }}</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item
                :index="item2.path"
                v-for="item2 in item.children"
                :key="item2.id"
                @click="saveNavState(item2.path)"
              >
                <template slot="title">
                  <!-- 图标 -->
                  <i class="iconfont icon-formItemBox"></i>
                  <!-- 文本 -->
                  <span>{{ item2.subName }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 主体区域 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

    <!-- 编辑信息的弹出框 -->
    <!-- 修改信息的对话框 -->
    <el-dialog
      title="修改管理员信息"
      :visible.sync="editDialogVisible"
    >
      <el-form
        label-width="100px"
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
      >
        <el-form-item label="管理员名">
          <el-input v-model="editForm.adminname" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <!-- 上传头像 -->
          <el-upload
            class="avatar-uploader"
            action="http://localhost/admin/uploadPic"
            :show-file-list="false"
            name="adminImg"
            :on-success="handleAvatarSuccess2"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="editForm.url" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSuccess">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    //验证邮箱的规则
    var checkEmail = (rule, value, callback) => {
      //验证邮箱的正则表达式
      var regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (regEmail.test(value)) {
        return callback();
      }
      callback(new Error("请输入合法的邮箱"));
    };
    return {
      imageUrl: "",
      /*修改用户表单 */
      editForm: {
        adminId: 0,
        adminname: "",
        password: "",
        email: "",
        avatar_url: "",
      },
      editDialogVisible:false,
      adminname: "茶几玛丽",
      //这是头像默认的
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      //被激活的的链接地址
      activePath: "",
      /* 修改表单的验证规则 */
      editFormRules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 10,
            message: "长度在 5 到 10 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail },
        ],
      },
      MenuList: [
        {
          id: 1,
          authName: "用户管理",
          pic: "iconfont icon-yonghu",
          children: [
            {
              id: 1 - 1,
              subName: "用户列表",
              path: "/user",
            },
          ],
        },
        {
          id: 2,
          authName: "管理员管理",
          pic: "iconfont icon-guanliyuan",
          children: [
            {
              id: 2 - 1,
              subName: "管理员列表",
              path: "/admin",
            },
          ],
        },
        {
          id: 3,
          authName: "菜品管理",
          pic: "iconfont icon-caipin-",
          children: [
            {
              id: 3 - 1,
              subName: "菜品列表",
              path: "/dish",
            },
            {
              id: 3 - 2,
              subName: "分类列表",
              path: "/classify",
            },
          ],
        },
        {
          id: 4,
          authName: "订单管理",
          pic: "iconfont icon-065chakandingdan",
          children: [
            {
              id: 4 - 1,
              subName: "订单列表",
              path: "/order",
            },
            {
              id: 4 - 2,
              subName: "评论列表",
              path: "/comment",
            },
          ],
        },
        {
          id: 5,
          authName: "店铺管理",
          pic: "iconfont icon-dianpufill",
          children: [
            {
              id: 5 - 1,
              subName: "店铺信息",
              path: "/shop",
            },
            {
              id: 5 - 2,
              subName: "海报设置",
              path: "/posters",
            },
          ],
        },
        {
          id: 6,
          authName: "数据统计",
          pic: "iconfont icon-shujutongji",
          children: [
            {
              id: 6 - 1,
              subName: "数据统计",
              path: "/chart",
            },
          ],
        },
      ],
    };
  },
  created() {
    this.activePath = window.sessionStorage.getItem("activePath");
    this.editForm.adminname = JSON.parse(window.sessionStorage.getItem("adminInfo")).adminname
    this.editForm.adminId = JSON.parse(window.sessionStorage.getItem("adminInfo")).adminId
    this.editForm.url = JSON.parse(window.sessionStorage.getItem("adminInfo")).url

  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      this.$confirm("此操作将退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.push("/login");
          window.sessionStorage.setItem("adminInfo", "");
          window.sessionStorage.setItem("token", "");
          window.sessionStorage.setItem("activePath","")
          this.$message({
            type: "success",
            message: "退出登录成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出登录",
          });
        });
    },
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = window.sessionStorage.getItem("activePath");
    },
    async showEditDialog(){
      this.editDialogVisible = true
      const { data: res } = await this.$http.get(
        `/admin/selectById/${this.editForm.adminId}`
      );
      this.editForm = res.data
      this.imageUrl = res.data.url
    },
    //这个用来编辑 回显
    handleAvatarSuccess2(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(this.imageUrl,"图片")
      this.editForm.url= res.data
      console.log(res,'.......')
      console.log(file,'............')
      
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    editSuccess() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (valid) {
          const res = await this.$http.put("/admin/updateById", {
            adminId: this.editForm.adminId,
            email: this.editForm.email,
            password: this.editForm.password,
            url:this.editForm.url
          });
          console.log(res, "我是修改之后的返回");
          if (res.data.flag == true) {
            this.$message.success("修改成功");
            this.editDialogVisible = false;
          } else {
            return this.$message.error("修改失败");
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.home-container {
  height: 932px;
}
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: #373d41; */
  background-image: url('../assets/beijing.jpg');
  color: #fff;
  font-size: 20px;
}
.el-header div {
  display: flex;
  align-items: center;
}
.el-header div span {
  margin-left: 15px;
}
.el-header div img {
  height: 50px;
  width: 50px;
}
.el-aside {
  /* background-color: #333744; */
  background-image: url('../assets/beijing.jpg');
  height: 100%;
}
.el-menu{
  background-image: url('../assets/beijing.jpg');
}
.touxiang {
  padding-right: 50px;
}
.welcome {
  font-size: 20px;
  display: flex;
  align-items: baseline;
  padding-left: 20px;
}
.welcome p {
  font-size: 15px;
}
</style>